2 files changed, 452 insertions, 0 deletions
diff --git a/app/[lng]/evcp/(evcp)/(system)/change-vendor/change-vendor-client.tsx b/app/[lng]/evcp/(evcp)/(system)/change-vendor/change-vendor-client.tsx
new file mode 100644
index 00000000..47776bba
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/(system)/change-vendor/change-vendor-client.tsx
@@ -0,0 +1,424 @@
+'use client';
+
+import * as React from 'react';
+import { useState, useTransition } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2, Search, User, Building2 } from 'lucide-react';
+import { searchUsers, getUserVendorInfo, getVendorList, changeVendor } from '@/lib/change-vendor/service';
+import { toast } from 'sonner';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  companyId: number | null;
+}
+
+interface UserVendorInfo {
+  userId: number;
+  userName: string;
+  userEmail: string;
+  currentVendorId: number | null;
+  currentVendorName: string | null;
+  currentVendorCode: string | null;
+}
+
+interface Vendor {
+  id: number;
+  vendorName: string;
+  vendorCode: string | null;
+  status: string;
+}
+
+export function ChangeVendorClient() {
+  const [isPending, startTransition] = useTransition();
+  const [isSearchingUsers, setIsSearchingUsers] = React.useState(false);
+  const [isSearchingVendors, setIsSearchingVendors] = React.useState(false);
+  const [isLoadingVendorInfo, setIsLoadingVendorInfo] = React.useState(false);
+  
+  const [userSearchQuery, setUserSearchQuery] = useState('');
+  const [users, setUsers] = useState<User[]>([]);
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+  const [userVendorInfo, setUserVendorInfo] = useState<UserVendorInfo | null>(null);
+  
+  const [vendorSearchQuery, setVendorSearchQuery] = useState('');
+  const [vendors, setVendors] = useState<Vendor[]>([]);
+  const [selectedVendorId, setSelectedVendorId] = useState<string>('');
+  
+  const [error, setError] = useState<string | null>(null);
+
+  // 유저 검색
+  const handleSearchUsers = async () => {
+    if (isSearchingUsers) return;
+
+    setIsSearchingUsers(true);
+    setError(null);
+    setSelectedUserId(null);
+    setUserVendorInfo(null);
+    setSelectedVendorId('');
+
+    try {
+      const result = await searchUsers(userSearchQuery);
+      
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+
+      setUsers(result.data || []);
+      
+      if (result.data && result.data.length === 0) {
+        toast.info('검색 결과가 없습니다.');
+      }
+    } catch (err) {
+      setError('유저 검색 중 오류가 발생했습니다.');
+      console.error(err);
+    } finally {
+      setIsSearchingUsers(false);
+    }
+  };
+
+  // 유저 검색어 입력 시 엔터키 처리
+  const handleUserSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSearchUsers();
+    }
+  };
+
+  // 유저 선택 시 해당 유저의 벤더 정보 조회
+  const handleUserSelect = async (userId: number) => {
+    setSelectedUserId(userId);
+    setUserVendorInfo(null);
+    setSelectedVendorId('');
+    setIsLoadingVendorInfo(true);
+    setError(null);
+
+    try {
+      const result = await getUserVendorInfo(userId);
+      
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+
+      setUserVendorInfo(result.data);
+      
+      // 벤더 목록도 함께 로드
+      await loadVendors();
+    } catch (err) {
+      setError('유저 정보를 불러오는 중 오류가 발생했습니다.');
+      console.error(err);
+    } finally {
+      setIsLoadingVendorInfo(false);
+    }
+  };
+
+  // 벤더 목록 로드
+  const loadVendors = async () => {
+    setIsSearchingVendors(true);
+    try {
+      const result = await getVendorList(vendorSearchQuery);
+      
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+
+      setVendors(result.data || []);
+    } catch (err) {
+      setError('벤더 목록을 불러오는 중 오류가 발생했습니다.');
+      console.error(err);
+    } finally {
+      setIsSearchingVendors(false);
+    }
+  };
+
+  // 벤더 검색
+  const handleSearchVendors = async () => {
+    if (isSearchingVendors) return;
+
+    setIsSearchingVendors(true);
+    setError(null);
+    setSelectedVendorId('');
+
+    try {
+      const result = await getVendorList(vendorSearchQuery);
+      
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+
+      setVendors(result.data || []);
+      
+      if (result.data && result.data.length === 0) {
+        toast.info('검색 결과가 없습니다.');
+      }
+    } catch (err) {
+      setError('벤더 검색 중 오류가 발생했습니다.');
+      console.error(err);
+    } finally {
+      setIsSearchingVendors(false);
+    }
+  };
+
+  // 벤더 검색어 입력 시 엔터키 처리
+  const handleVendorSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSearchVendors();
+    }
+  };
+
+  // 벤더 변경 처리
+  const handleChangeVendor = () => {
+    if (!selectedUserId) {
+      toast.error('유저를 선택해주세요.');
+      return;
+    }
+
+    if (!selectedVendorId) {
+      toast.error('변경할 벤더를 선택해주세요.');
+      return;
+    }
+
+    const vendorId = Number(selectedVendorId);
+    
+    if (userVendorInfo?.currentVendorId === vendorId) {
+      toast.error('현재 선택된 벤더와 동일합니다.');
+      return;
+    }
+
+    startTransition(async () => {
+      try {
+        const result = await changeVendor(selectedUserId, vendorId);
+
+        if (result.error || !result.success) {
+          toast.error(result.error || '벤더 변경에 실패했습니다.');
+          return;
+        }
+
+        toast.success(`"${result.data?.userName}"님의 벤더가 "${result.data?.vendorName}"로 변경되었습니다.`);
+
+        // 유저 정보 새로고침
+        await handleUserSelect(selectedUserId);
+      } catch (err) {
+        toast.error('벤더 변경 중 오류가 발생했습니다.');
+        console.error(err);
+      }
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 1단계: 유저 검색 및 선택 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <User className="h-5 w-5" />
+            유저 검색 및 선택
+          </CardTitle>
+          <CardDescription>
+            벤더를 변경할 유저를 검색하고 선택하세요.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* 유저 검색 */}
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <Input
+                placeholder="유저명 또는 이메일로 검색..."
+                value={userSearchQuery}
+                onChange={(e) => setUserSearchQuery(e.target.value)}
+                onKeyDown={handleUserSearchKeyDown}
+                disabled={isSearchingUsers}
+              />
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleSearchUsers}
+              disabled={isSearchingUsers}
+            >
+              {isSearchingUsers ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Search className="h-4 w-4" />
+              )}
+              <span className="ml-2">검색</span>
+            </Button>
+          </div>
+
+          {/* 유저 선택 */}
+          {users.length > 0 && (
+            <div className="grid gap-2">
+              <Label>유저 선택</Label>
+              <Select
+                value={selectedUserId?.toString() || ''}
+                onValueChange={(value) => handleUserSelect(Number(value))}
+                disabled={isLoadingVendorInfo}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="유저를 선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {users.map((user) => (
+                    <SelectItem key={user.id} value={user.id.toString()}>
+                      <div className="flex flex-col">
+                        <span>{user.name}</span>
+                        <span className="text-xs text-muted-foreground">{user.email}</span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {isLoadingVendorInfo && (
+            <div className="flex items-center justify-center py-4">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          )}
+
+          {/* 선택한 유저의 현재 벤더 정보 */}
+          {userVendorInfo && (
+            <div className="rounded-lg border p-4 bg-muted/50">
+              <div className="grid gap-2">
+                <div className="flex items-center gap-2">
+                  <User className="h-4 w-4 text-muted-foreground" />
+                  <Label className="text-sm font-medium">선택한 유저</Label>
+                </div>
+                <div className="text-sm">
+                  <div className="font-semibold">{userVendorInfo.userName}</div>
+                  <div className="text-muted-foreground">{userVendorInfo.userEmail}</div>
+                </div>
+                <div className="mt-2 pt-2 border-t">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Building2 className="h-4 w-4 text-muted-foreground" />
+                    <Label className="text-sm font-medium">현재 벤더</Label>
+                  </div>
+                  <div className="text-sm font-semibold">
+                    {userVendorInfo.currentVendorName || '벤더 정보 없음'}
+                    {userVendorInfo.currentVendorCode && (
+                      <span className="text-muted-foreground ml-2">
+                        ({userVendorInfo.currentVendorCode})
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 2단계: 벤더 검색 및 선택 (유저 선택 후에만 표시) */}
+      {selectedUserId && userVendorInfo && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Building2 className="h-5 w-5" />
+              벤더 변경
+            </CardTitle>
+            <CardDescription>
+              변경할 벤더를 검색하고 선택하세요.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* 벤더 검색 */}
+            <div className="flex gap-2">
+              <div className="flex-1">
+                <Input
+                  placeholder="벤더명 또는 벤더코드로 검색..."
+                  value={vendorSearchQuery}
+                  onChange={(e) => setVendorSearchQuery(e.target.value)}
+                  onKeyDown={handleVendorSearchKeyDown}
+                  disabled={isSearchingVendors}
+                />
+              </div>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleSearchVendors}
+                disabled={isSearchingVendors}
+              >
+                {isSearchingVendors ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Search className="h-4 w-4" />
+                )}
+                <span className="ml-2">검색</span>
+              </Button>
+            </div>
+
+            {/* 벤더 선택 */}
+            {vendors.length > 0 && (
+              <div className="grid gap-2">
+                <Label htmlFor="vendor-select">변경할 벤더 선택</Label>
+                <Select
+                  value={selectedVendorId}
+                  onValueChange={setSelectedVendorId}
+                  disabled={isPending}
+                >
+                  <SelectTrigger id="vendor-select">
+                    <SelectValue placeholder="벤더를 선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {vendors.map((vendor) => (
+                      <SelectItem key={vendor.id} value={vendor.id.toString()}>
+                        <div className="flex flex-col">
+                          <span>{vendor.vendorName}</span>
+                          {vendor.vendorCode && (
+                            <span className="text-xs text-muted-foreground">
+                              {vendor.vendorCode}
+                            </span>
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {/* 저장 버튼 */}
+            <Button
+              onClick={handleChangeVendor}
+              disabled={isPending || !selectedVendorId}
+              className="w-full"
+            >
+              {isPending ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  변경 중...
+                </>
+              ) : (
+                <>
+                  <Building2 className="mr-2 h-4 w-4" />
+                  벤더 변경
+                </>
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/app/[lng]/evcp/(evcp)/(system)/change-vendor/page.tsx b/app/[lng]/evcp/(evcp)/(system)/change-vendor/page.tsx
new file mode 100644
index 00000000..4b4b0a8d
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/(system)/change-vendor/page.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type Metadata } from 'next';
+import { Shell } from '@/components/shell';
+import { ChangeVendorClient } from './change-vendor-client';
+
+export const metadata: Metadata = {
+  title: '벤더 변경',
+  description: '유저의 벤더를 검색하고 변경할 수 있습니다.',
+};
+
+export const dynamic = 'force-dynamic';
+
+export default async function ChangeVendorPage() {
+  return (
+    <Shell className="gap-6">
+      <div className="flex items-center justify-between space-y-2">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">벤더 변경</h2>
+          <p className="text-muted-foreground">
+            유저를 검색하고 선택한 후, 해당 유저의 벤더를 변경할 수 있습니다.
+          </p>
+        </div>
+      </div>
+
+      <ChangeVendorClient />
+    </Shell>
+  );
+}